<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="业主服务"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="banner">
      <div>降低居住交易成本</div>
      <div>是我们的江湖使命</div>
    </div>
    <div class="jumppart">
      <div @click="jumptosell" class="leftbox">
        <div class="box1">立即出售</div>
        <div class="box2">0费用 / 方式可选</div>
      </div>
      <div class="rightbox">
        <div @click="jumptoeva" class="topbox">
          <div class="box3">免费估价</div>
          <div class="box2">资产价值 心中有数</div>
        </div>
        <div @click="jumptorelese" class="bottombox">
          <div class="box3">房东直租</div>
          <div class="box2">定制服务</div>
        </div>
      </div>
    </div>
    <div class="tipshow">
      <span>行情资讯</span>
      <div><van-icon name="location-o" />{{ city }}</div>
    </div>
    <div class="showpart">
      <div class="box">
        <div class="twords">当月挂牌房源数量</div>
        <div class="swords">
          <div>数据更新中</div>
          <!-- <span>套</span> -->
        </div>
      </div>
      <div class="box">
        <div class="twords">当月成交房源数量</div>
        <div class="swords">
          <div>数据更新中</div>
          <!-- <span>套</span> -->
        </div>
      </div>
    </div>
    <div class="tipshow">
      <span>当地挂牌房源</span>
      <div><van-icon name="location-o" />{{ city }}</div>
    </div>
    <div v-show="houselist.length != 0">
      <div
        @click="jumptobuydetail(item.houseId, item)"
        v-for="(item, index) in houselist"
        :key="index"
        class="house"
      >
        <img :src="item.houseImage" />
        <div class="intrduce">
          <div class="title1">{{ item.subdistrict }}</div>
          <div class="title2">
            <span>{{ item.houseType }}</span
            >|<span>{{ item.coveredArea }}</span
            >|<span>{{ item.floor }}</span>
          </div>
          <div class="tips">
            <span>{{ item.aspectType }}</span>
            <span>{{ item.decoration }}</span>
            <span>{{ item.houseGenre }}</span>
          </div>
          <div class="title3">
            {{ item.listedPrice }}万<span
              ><span>{{
                ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
              }}</span
              >元/m<span class="up">2</span></span
            >
          </div>
        </div>
      </div>
    </div>
    <div v-show="houselist.length == 0" class="nohouse">
      <img src="../../assets/nohouse.png" alt="" />
      <div>房源上新中...</div>
    </div>
  </div>
</template>

<script>
import { getBuyhouselist } from "../../apis/house.js";
import local from "../../utils/local.js";
import { getUserId } from "@/utils/auth";
import { mapGetters } from "vuex";
import { _local } from "@/utils/storage";
export default {
  data() {
    return {
      city: "",
      currentPage: 1,
      perPage: 10,
      houselist: [],
      loading: false,
      info: {},
    };
  },
  created() {
    this.info = JSON.parse(local.get("userInfo"));
    this.city = local.get("city");
    this.getHouse();
  },
  computed: {
    ...mapGetters(["role"]),
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    jumptosell() {
      const userId = getUserId();
      if (userId) {
        if (
          this.role == 0 ||
          this.role == 1 ||
          this.role == 3 ||
          this.role == 5
        ) {
          this.$router.push({ path: "/buysell" });
        } else if (this.role == 2 || this.role == 4) {
          this.$dialog
            .alert({
              title: "温馨提示",
              message: "您当前身份无法发布业主房源,如有问题请咨询客服",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        }
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    jumptoeva() {
      this.$router.push({ path: "/buyevaluate" });
    },
    jumptorelese() {
      const userId = getUserId();
      if (userId) {
        if (this.role == 4 || this.role == 3) {
          this.$dialog
            .alert({
              title: "温馨提示",
              message: "您当前身份无法发布租房房源,如有问题请咨询客服",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        } else {
          this.$router.push({ path: "/releasehouse" });
        }
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    jumptobuydetail(e, item) {
      // let list = JSON.parse(local.get("todaybuyhouselist"));
      // for (let i = 0; i < list.length; i++) {
      //   if (list[i].houseId == item.houseId) {
      //     list.splice(i, 1);
      //   }
      // }
      // list.unshift(item);
      // local.set("todaybuyhouselist", JSON.stringify(list));
      // local.set("houseId", e);
      this.$router.push({
        path: "/buyhousedetail",
        query: {
          houseId: e,
        },
      });
    },
    async getHouse() {
      await getBuyhouselist({
        adcode: _local.get("adCode"),
        currentPage: this.currentPage,
        perPage: this.perPage,
      }).then((response) => {
        this.houselist = response.result.list;
        if (this.houselist.length == 10) {
          this.loading = true;
        }
      });
    },
    showScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        getBuyhouselist({
          adcode: _local.get("adCode"),
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          if (response.result.list.length != 10) {
            this.loading = false;
          }
          this.houselist = [...this.houselist, ...response.result.list];
        });
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style lang="less" scoped>
.banner {
  height: 140px;
  background: url("../../assets/owner01.png") 0px 0px no-repeat;
  background-size: 100% 100%;
  padding: 35px 0;
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  div {
    &:last-child {
      padding-left: 40px;
      margin-top: 5px;
    }
  }
}
.jumppart {
  display: flex;
  margin: 15px 0;
  padding: 0 15px;
  justify-content: space-between;
  .leftbox {
    width: 48%;
    background: url("../../assets/owner02.png") 0px 0px no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 35px 20px;
    .box1 {
      font-size: 20px;
      color: #fff;
    }
  }
  .rightbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 48%;
    > div {
      width: 100%;
      box-sizing: border-box;
      padding: 15px;
    }
    .topbox {
      margin-bottom: 10px;
      background: url("../../assets/owner03.png") 0px 0px no-repeat;
      background-size: 100% 100%;
    }
    .bottombox {
      background: url("../../assets/owner04.png") 0px 0px no-repeat;
      background-size: 100% 100%;
    }
  }
  .box2 {
    font-size: 12px;
    color: #fff;
    margin-top: 5px;
  }
  .box3 {
    font-size: 17px;
    color: #fff;
  }
}
.tipshow {
  margin: 15px;
  display: flex;
  justify-content: space-between;
  > span {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  > div {
    display: flex;
    align-items: center;
    color: #46b8cb;
    font-size: 14px;
  }
}
.showpart {
  margin: 0 15px;
  display: flex;
  justify-content: space-between;
  .box {
    background-color: #fafafa;
    padding: 20px 15px;
    width: 165px;
    box-sizing: border-box;
    .twords {
      font-size: 13px;
      font-weight: bold;
      color: #333;
    }
    .swords {
      margin-top: 10px;
      font-size: 16px;
      color: #d43b33;
      font-weight: bold;
      display: flex;
      align-items: center;
      span {
        font-weight: normal;
        font-size: 13px;
      }
    }
  }
}
.house {
  background-color: #fff;
  margin: 0 15px;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 121px;
    height: 112px;
    min-width: 121px;
    max-width: 121px;
    border-radius: 5px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 3px;
        border: 0;
        background-color: #ebfafd;
        color: #5eb9d0;
        border-radius: 5px;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        color: #999;
        font-size: 12px;
        margin-left: 6px;
      }
    }
  }
  .up {
    margin: 0px !important;
    font-size: 12px;
    vertical-align: super;
    transform: scale(calc(10 / 12));
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 15px;
  padding-bottom: 30px;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>